{include file="public:head" /}
{include file="public:footer" /}

<div class="content">
	<div class="slide-banner" data-trackid="首页-焦点图">
		<div class="swiper-wrapper">
			{volist name="banner" id="vo"}
			<div class="swiper-slide"><a href="banner/to?type={$vo.type}&key_word={$vo.key_word}"
										 data-trackid="首页-焦点图-{$vo.id}">
				<div class="ware-img ui-imglazyload" data-url="{$vo.img.url}"></div>
			</a></div>
			{/volist}
		</div>
		<div class="swiper-pagination"></div>
	</div><!-- //焦点图结束 -->

	<div class="menu flex">
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='1'
		   data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/sjxm.png"></div></span>手机数码</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='2'
		   data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/ppmz.png"></div></span>品牌美妆</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='3'
		   data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/nfcp.png"></div></span>农副产品</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='4'
		   data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/fzcp.png"></div></span>服装鞋子</a>
	</div>
	<div class="menu flex">
		<a class="item cell" href="javascript:;" onclick="javascript:b(this);" data-id='31'
		   data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/yyxg.png"></div></span>永久限购</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='5'
		   data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/shcs.png"></div></span>生活超市</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='6'
		   data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/hdys.png"></div></span>本地预定</a>
		<a class="item cell" href="javascript:;" onclick="javascript:a(this);" data-id='7'
		   data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload"
															data-url="__STATIC__/images/xnsx.png"></div></span>想你所想</a>
	</div>
	<!-- //主菜单 -->

	<div class="cate-swiper mt" data-trackid="首页-品类">
		<div class="swiper-title" id="theme_title">
			<div class="swiper-wrapper">
				{volist name="theme" id="vo" key="k"}
				{if condition = "$k eq $max_theme"}
				<div class="swiper-slide active" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
				{else /}
				<div class="swiper-slide" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
				{/if}
				{/volist}

			</div>
		</div>
		<div class="swiper-container list list-view" id="container_id">
			<div class="swiper-wrapper">
				{volist name="theme" id="vo" key="k"}
				<div class="swiper-slide" data-trackid="{$vo.id}">
					<ul data-trackid="{$vo.id}">

					</ul>
				</div>
				{/volist}
			</div>
		</div>
	</div><!-- //首页品类结束 -->


</div>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/base.min.js"></script>
<script src="__STATIC__/js/swiper.js"></script>
<script src="__STATIC__/js/tab.js"></script>
<script src="__STATIC__/js/shopin.js"></script>
<script>
	//焦点图
	var mySwiper = new Swiper('.slide-banner', {
		pagination: '.swiper-pagination',
		autoplay: 3000,
		autoplayDisableOnInteraction: false
	});
	var titSwiper;
	var conSwiper;


	function goLocation(i) {
		conSwiper.slideTo(i, 300, function () {
		});
		setClass(i);
	}
    var conSwiper = new Swiper('.swiper-container', {
        pagination : '.pagination',
        preloadImages: false,
        lazyLoading: true
    });
    conSwiper.params.onSlideChangeEnd = function(){
        // console.log(conSwiper)
        var index = conSwiper.activeIndex;
        var prevIndex = conSwiper.previousIndex;
        // console.log(index)
        // console.log(prevIndex)
        // console.log(jQuery('#theme_title').children().children().length)
        var sumIndex = jQuery('#theme_title').children().children().length
        if (index > prevIndex){
            if( index >= sumIndex){
                conSwiper.slideTo(prevIndex,300);
                return;
            }
            titSwiper.slideTo(index, 300, function() {});
            // var slidleft = $("#slide" + index).offset().left;
            var slidwidth = $("#slide" + index).width();
            setClass(index);
        }else{
            titSwiper.slideTo(index, 300, function() {});
            setClass(index);
        };
    };
    $(".swiper-title").find('.swiper-slide').each(function(index, el) {
        $(el).on('click', function(){
            goLocation(index);
        });
    });
    function setClass(i) {
        $(".swiper-title").find('.swiper-slide').each(function(index, el) {
            if (index != i) {
                if ($(el).hasClass("active")) {
                    $(el).removeClass("active");
                }
            } else {
                $(el).addClass("active");
            }
        });
    };
	//选项卡
	$(".tab-wrapper").tab();
</script>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
    $.noConflict();
    function getInfo(that, theme_id,url) {
        if(that.attr('data-load') == 1) {
            // 已经加载过
            jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
            jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
            var img_list = jQuery('#container_id div[data-trackid="' + theme_id + '"] img');
            for (var i = 0; i < img_list.length; i++) {
                var src = img_list[i].dataset.srcString;
                jQuery(img_list[i]).attr('data-src', src);
            }
        } else {
            jQuery.ajax({
                type : "get",
                dataType : 'json',
                data:{
                    id : theme_id
                },
                url : "/theme_product",
                async : true,
                success:function(data){
                    var data = data.data;
                    if(data.products){
                        that.attr('data-load', 1);
                        jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
                        jQuery('#container_id ul[data-trackid="' + theme_id + '"]').empty();
                        jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
                        for (var i = 0; i < data.products.length; i++) {
                            var li ='<li><a class="list-item" href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ data.products[i].url +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px;">' + data.products[i].name + '</h3><p class="discount" style="width: 165px;padding-top:20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' +  data.products[i].price + '(市场价)</span><span class="n">￥'+ data.products[i].member_price + '(会员价)</span></p></div></div></a></li>';
                            jQuery('#container_id div ul[data-trackid="' + theme_id + '"]').append(li);
                        }
                    }
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
    }	
    	//分类swiper
            function b(e){
            jQuery.ajax({
                type : "get",
                dataType : 'json',
                data :{
                    id:e.getAttribute('data-id')
                },
                    url : "/sale_index_list",
                    async : true,
                success:function(data){
                     console.log(data);
                         $('#theme_title .swiper-wrapper').html('');
                         $('#container_id .swiper-wrapper').html('');
                         var bb = '';
                        for (var i = 0 ; i< data.length ; i++) {
                     
                           bb = '<div class="swiper-slide swiper-slide swiper-slide-active" style="width: 83.3333px;" id="'+data[i]['id']+'" data-id="'+data[i]['id']+'" data-trackid="'+data[i]['id']+'" data-load="0" key = '+[i]+'>'+data[i]['name']+'</div>'
                            $('#theme_title .swiper-wrapper').append(bb)        
                            var div = '<div class="swiper-slide" data-trackid="'+data[i]['id']+'"><ul data-trackid="'+data[i]['id']+'"></ul></div>';
                            $('#container_id .swiper-wrapper').append(div);

                        }
                        $('#theme_title .swiper-slide').on('click',function(){
                                 var that = $(this);
                                var theme_id = that.attr('key');
                                var id = that.attr('id');
                                $(this).addClass('active').siblings().removeClass('active');
                				
                         			
                               //绑定id字段
                                 m = data[theme_id];
                               console.log(m)
                                 //遍历这个id上面的数据
                                 //创建需要遍历的内容
                                 var li = document.createElement('li');
                                 for ( var j in m) { 
                                    li.innerHTML = '<a class="list-item" href="/product/info.html?id='+ m.id +'" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ m.url +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  m.name + '</h3><p class="discount" style="width: 165px;padding-top:20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' +  m.price + '(市场价)</span><span class="n">￥'+ m.member_price + '(会员价)</span></p></div></div></a>';
                   
                                    $('#container_id div ul[data-trackid="' + id + '"]').html(li);
                                 }
                                $("#container_id .swiper-slide").hide();
                                $('#container_id div [data-trackid="'+ id + '"]').show();
                                $('#container_id div ul[data-trackid="'+ id + '"]').show();
                         }) 
                         $('#theme_title>.swiper-wrapper>div').click();
                        $('#theme_title .swiper-slide:first-child').click();
                        titSwiper.slideTo(0, 300)
                        conSwiper.slideTo(0, 300)
                         
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
            //分类swiper
            function a(e){
            jQuery.ajax({
                type : "get",
                dataType : 'json',
                data :{
                    id:e.getAttribute('data-id')
                },
                    url : "/digital_list",
                    async : true,
                success:function(data){
//                     console.log(data);
                         $('#theme_title .swiper-wrapper').html('');
                         $('#container_id .swiper-wrapper').html('');
                         var bb = '';
                        for (var i = 0 ; i< data.length ; i++) {
                     
                           bb = '<div class="swiper-slide swiper-slide swiper-slide-active" style="width: 83.3333px;" id="'+data[i]['id']+'"  data-id="'+data[i]['id']+'" data-trackid="'+data[i]['id']+'" data-load="0" key = '+[i]+'>'+data[i]['name']+'</div>'
                            $('#theme_title .swiper-wrapper').append(bb)        
                            var div = '<div class="swiper-slide" data-trackid="'+data[i]['id']+'"><ul data-trackid="'+data[i]['id']+'"></ul></div>';
                            $('#container_id .swiper-wrapper').append(div);

                        }
                        // $('#theme_title .swiper-slide').on('click',function(){
                        //          var that = $(this);
                        //         var theme_id = that.attr('key');
                        //         var id = that.attr('id');
                        //         $(this).addClass('active').siblings().removeClass('active');
                				
                         			
                        //        //绑定id字段
                        //          m = data[theme_id]['products'];
                        //        console.log(data[theme_id])
                        //          //遍历这个id上面的数据
                        //          //创建需要遍历的内容
                        //          var li = document.createElement('li');
                        //          for ( var j = 0;j<m.length;j++) { 
                        //              li.innerHTML += '<a class="list-item" href="/product/info.html?id='+ m[j]['id'] +'" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ m[j]['url'] +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  m[j]['name'] + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' +  m[j]['price'] + '(市场价)</span><span class="n">￥'+ m[j]['member_price'] + '(会员价)</span></p></div></div></a>';
                   
                        //             $('#container_id div ul[data-trackid="' + id + '"]').html(li);
                        //          }
                        //         $("#container_id .swiper-slide").hide();
                        //         $('#container_id div [data-trackid="'+ id + '"]').show();
                        //         $('#container_id div ul[data-trackid="'+ id + '"]').show()

                        //         // $('#container_id div ul[data-trackid="'+ id + '"]').show('normal',function(){
                                    
                        //         // });
                               
                        //  }) 
                        jQuery('#theme_title div div').click(function(){
                            var that = jQuery(this);
                            var theme_id = that.attr('data-id');
                            switch (theme_id)
                            {
                                case 31:
                                    url = "/sale_index_list";
                                    break;
                                case 1,2,3,4,5,6,7:
                                    url = "/digital_list"
                                    break
                                default:
                                    url = "/theme_product"
                            }
                            getInfo(that, theme_id, url);
                        })
                        $(".swiper-title").find('.swiper-slide').each(function(index, el) {
                            $(el).on('click', function(){
                                goLocation(index);
                            });
                        });
                          $('#theme_title>.swiper-wrapper>div').click();
                        $('#theme_title .swiper-slide:first-child').click(); 
                         
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
        jQuery('#theme_title div div').click(function(){
        var that = jQuery(this);
        // console.log(that)
        var theme_id = that.attr('data-id');
        // console.log(theme_id)
        switch (theme_id)
        {
            case 31:
                url = "/sale_index_list";
                break;
            case 1,2,3,4,5,6,7:
                url = "/digital_list"
                break
            default:
                url = "/theme_product"
        }
        getInfo(that, theme_id, url);
    })
    $('#theme_title>.swiper-wrapper>div').click();
     $('#slide{$max_theme}').click();
</script>
</body>
</html>